<template>
	<el-card>
		<div slot="header">
			<span>订单管理</span>
		</div>
		<div class="content">
			<!-- 查询表单 -->
			<el-form
				:inline="true"
				size="small"
				ref="form"
				:model="searchForm"
				label-width="80px"
			>
				<el-form-item label="订单号">
					<el-input v-model="searchForm.orderNo"></el-input>
				</el-form-item>
				<el-form-item label="收货人">
					<el-input v-model="searchForm.consignee"></el-input>
				</el-form-item>
				<el-form-item label="手机号">
					<el-input v-model="searchForm.phone"></el-input>
				</el-form-item>
				<el-form-item label="订单状态">
					<el-select v-model="searchForm.orderState" placeholder="">
						<el-option value="已受理">已受理 </el-option>
						<el-option value="派送中">派送中 </el-option>
						<el-option value="已完成">已完成 </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="下单时间">
					<el-date-picker
						format="yyyy-MM-dd HH:mm:ss"
						value-format="yyyy-MM-dd HH:mm:ss"
						v-model="searchForm.date"
						type="datetimerange"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
					>
					</el-date-picker>
				</el-form-item>

				<el-form-item>
					<el-button @click="search" type="primary">查询</el-button>
					<el-button @click="reset" type="primary">重置</el-button>
				</el-form-item>
			</el-form>

			<el-table :data="tableData" border :style="{ width: w + 'px' }">
				<el-table-column fixed prop="orderNo" label="订单号" width="80">
				</el-table-column>
				<el-table-column label="下单时间" width="180">
					<template slot-scope="scope">
						{{ scope.row.orderTime | formateDate }}
					</template>
				</el-table-column>
				<el-table-column prop="phone" label="手机号" width="120">
				</el-table-column>

				<el-table-column prop="consignee" label="收货人" width="120">
				</el-table-column>
				<el-table-column prop="deliverAddress" label="配送地址" width="120">
				</el-table-column>
				<el-table-column label="送达时间" width="180">
					<template slot-scope="scope">
						{{ scope.row.deliveryTime | formateDate }}
					</template>
				</el-table-column>
				<el-table-column prop="remarks" label="用户备注" width="120">
				</el-table-column>
				<el-table-column prop="orderAmount" label="订单金额" width="120">
				</el-table-column>
				<el-table-column prop="orderState" label="订单状态" width="120">
				</el-table-column>

				<el-table-column fixed="right" label="操作" width="100">
					<template slot-scope="scope">
						<el-button @click="handleClick(scope.row)" type="text" size="small"
							>查看</el-button
						>
						<el-button
							v-if="['super'].includes(role)"
							type="text"
							size="small"
							@click="editorder(scope.row)"
							>编辑</el-button
						>
					</template>
				</el-table-column>
			</el-table>
			<el-drawer
				show-close
				title="编辑订单"
				:visible.sync="dialog"
				direction="ltr"
				custom-class="demo-drawer"
				ref="drawer"
			>
				<div class="demo-drawer__content">
					<el-form :model="editorderdata">
						<el-form-item label="手机号">
							<el-input
								v-model="editorderdata.phone"
								autocomplete="off"
							></el-input>
						</el-form-item>
						<el-form-item label="收货人">
							<el-input
								v-model="editorderdata.consignee"
								autocomplete="off"
							></el-input>
						</el-form-item>
						<el-form-item label="送货地址">
							<el-input
								v-model="editorderdata.deliverAddress"
								autocomplete="off"
							></el-input>
						</el-form-item>
						<el-form-item label="备注">
							<el-input
								v-model="editorderdata.remarks"
								autocomplete="off"
							></el-input>
						</el-form-item>

						<el-form-item label="订单状态">
							<el-select
								v-model="editorderdata.orderState"
								placeholder="请选择订单状态"
							>
								<el-option label="已受理" value="已受理"></el-option>
								<el-option label="派送中" value="派送中"></el-option>
								<el-option label="已完成" value="已完成"></el-option>
							</el-select>
						</el-form-item>
					</el-form>
					<div class="demo-drawer__footer">
						<el-button @click="cancelForm">置空订单信息</el-button>
						<el-button type="primary" @click="ackform">确定</el-button>
					</div>
				</div>
			</el-drawer>
			<!-- <el-drawer
        show-close
        title="订单信息"
        :visible.sync="table"
        direction="ltr"
        size="50%"
      >
        <el-table :data="rowdata">
          <el-table-column
            property="orderNo"
            label="订单号"
            width="150"
          ></el-table-column>
          <el-table-column
            property="orderTime"
            label="下单时间"
            width="200"
          ></el-table-column>
          <el-table-column
            property="consignee"
            label="收货人"
          ></el-table-column>
          <el-table-column
            property="deliverAddress"
            label="配送地址"
          ></el-table-column>
          <el-table-column label="送达时间" width="180">
            <template slot-scope="scope">
              {{ scope.row.deliveryTime | formateDate }}
            </template>
          </el-table-column>
          <el-table-column
            property="remarks"
            label="用户备注"
          ></el-table-column>
          <el-table-column
            property="orderAmount"
            label="订单金额"
          ></el-table-column>
          <el-table-column
            property="orderState"
            label="订单状态"
          ></el-table-column>
        </el-table>
      </el-drawer> -->
			<el-dialog title="订单详情" :visible.sync="orderVisible" >
				<el-form :model="form" :disabled="true">
					<el-form-item label="订单号" :label-width="formLabelWidth">
						<el-input v-model="form.orderNo" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="下单时间" :label-width="formLabelWidth">
						<el-input v-model="form.orderTime" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="联系电话" :label-width="formLabelWidth">
						<el-input v-model="form.phone" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="收货人" :label-width="formLabelWidth">
						<el-input v-model="form.consignee" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="送货地址" :label-width="formLabelWidth">
						<el-input
							v-model="form.deliverAddress"
							autocomplete="off"
						></el-input>
					</el-form-item>
					<el-form-item label="送达时间" :label-width="formLabelWidth">
						<el-input v-model="form.deliveryTime" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="备注" :label-width="formLabelWidth">
						<el-input v-model="form.remarks" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="订单金额" :label-width="formLabelWidth">
						<el-input v-model="form.orderAmount" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="订单状态" :label-width="formLabelWidth">
						<el-select v-model="form.orderState" placeholder="请选择活动区域">
							<el-option label="已完成" value="已完成"></el-option>
							<el-option label="派送中" value="派送中"></el-option>
							<el-option label="已受理" value="已受理"></el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<!-- <div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="dialogFormVisible = false"
						>确 定</el-button
					>
				</div> -->
			</el-dialog>
			<el-pagination
				background
				@current-change="handleCurrentChange"
				layout="total,prev, pager, next,jumper"
				:total="total"
				:current-page="currentPage"
				:page-size="pageSize"
			>
			</el-pagination>
		</div>
	</el-card>
</template>

<script>
import local from "@/utils/local";
import { formateDate } from "@/api/user";

import {
	getOrderlist,
	getsearch,
	editorderinfo,
	getOrderdetail,
} from "@/api/order";

export default {
	data() {
		return {
			editorderdata: {},
			dialog: false,
			role: "",
			currentPage: 1,
			pageSize: 5,
			total: 0,
			w: document.body.clientWidth - 300,
			value1: "",
			searchForm: {
				orderNo: "",
				consignee: "",
				phone: "",
				orderState: "",
				date: [],
			},
			formLabelWidth: "",
			orderVisible: false,
			tableData: [],
			rowdata: [],
			form: {
				id: 0,
				orderNo: "",
				orderTime: "",
				phone: "",
				consignee: "",
				deliverAddress: "",
				deliveryTime: "",
				remarks: "",
				orderAmount: 0,
				orderState: "",
			},
		};
	},
	methods: {
		cancelForm() {
			this.editorderdata = {};
			console.log(22);
		},
		ackform() {
			this.dialog = false;

		},
		//     async editformok(){
		//       // let params=JSON.parse(JSON.stringify(this.editorderdata))
		//       // params.
		//     // let res= await editorderinfo(this.editorderdata)
		//     console.log(555);

		// console.log(33);
		//     },
		editorder(a) {
			this.editorderdata = a;
			this.dialog = true;
			console.log(a);
		},

		search() {
			this.currentPage = 1;
			// 深拷贝
			this.params = JSON.parse(JSON.stringify(this.searchForm));
			//  get请求不能传字符串
			this.params.data = JSON.stringify(this.params.data);

			this.getData(this.params);
		},
		reset() {
			this.searchForm = {
				orderNo: "",
				consignee: "",
				phone: "",
				orderState: "",
				date: [],
			};
			this.search();
		},

		handleCurrentChange(val) {
			this.currentPage = val;
			// 页面变化下面获取数据也必须带上查询参数
			this.getData(this.params);
		},
		// 获取数据
		async getData(aa = {}) {
			let res = await getOrderlist({
				currentPage: this.currentPage,
				pageSize: this.pageSize,
				...aa,
			});
			console.log(res);
			let { total, data } = res.data;
			this.total = total;
			this.tableData = data;
		},
		resize() {
			this.w = document.body.clientWidth - 300;
		},
		handleClick(a) {
      const id=a.id
		
			this.orderVisible = true;
      this.getorderdetail(id)
			// if (this.rowdata.length != 0) {
			//   this.rowdata.pop();
			// }
			// this.rowdata.push(a);
			// console.log(a);
		},
    async getorderdetail(a){
      let res = await getOrderdetail({
			 id:a
			});
      this.form = res.data.data

    }
	},
	created() {
		window.addEventListener("resize", this.resize);

		this.getData();
		this.role = local.get("role");
	},
};
</script>

<style>
.el-pagination {
	margin-top: 20px;
}
</style>
